<template>
	<view class="warp" :style="[warpStyle]">
		<view class="btn-box" :style="[btnBoxStyle]">
			<view class="btn-img">
				<image :src="btnImgSrc" mode="aspectFit"
					:style="{width:btnImgWidth + 'rpx',height:btnImgWidth + 'rpx'}"></image>
			</view>
			<view class="btn-text"><text :style="{color:btnTextColor,fontSize:btnTextSize + 'px'}">{{btnText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 自定义button属性
			btnBoxWidth: {
				type: Number,
				default: 0
			},
			btnBoxHeight: {
				type: Number,
				default: 0
			},
			btnColor: {
				type: String,
				default: '#aa0000'
			},
			btnEColor: {
				type: String,
				default: '#FF6B3E'
			},
			btnFColor: {
				type: String,
				default: '#FA7099'
			},
			btnImgSrc: {
				type: String,
				default: '#ff557f'
			},
			btnImgWidth: {
				type: Number,
				default: 0
			},
			btnText: {
				type: String,
				default: ''
			},
			btnTextColor: {
				type: String,
				default: '#ffffff'
			},
			btnTextSize: {
				type: Number,
				default: 0
			},
			btnRadius: {
				type: Number,
				default: 0
			},
			warpBorderColor:{
				type: String,
				default: '#ffffff'
			}
		},
		data() {
			return {};
		},
		computed: {
			warpStyle() {
				let style = {};
				// style.width = this.btnBoxWidth + 12 + 'rpx';
				// style.height = this.btnBoxHeight + 12 + 'rpx';
				style.border = `1rpx solid ${this.warpBorderColor}`;
				// console.log(style)
				style.padding="10rpx"
				return style;
			},
			btnBoxStyle() {
				let style = {};
				style.width = this.btnBoxWidth + 'rpx';
				style.height = this.btnBoxHeight + 'rpx';
				// style.backgroundColor='linear-gradient(0deg, #5D93FF, #74B4FC)';
				style.background = `linear-gradient(0deg,${this.btnEColor}, ${this.btnFColor})`;
				style.borderRadius = this.btnRadius + 'rpx';
				// console.log(style);
				return style;
			}
		}
	};
</script>

<style>
	.warp{
		/* position: absolute; */
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50% 50%;
/* 		width: 310rpx;
		height: 310rpx; */
		/* border: 1px solid red; */
	}
	.btn-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* justify-content: flex-start; */
		/* 	width: 200rpx;
		height: 200rpx; */
		border-radius: 50% 50%;
		/* padding: 10rpx; */
		/* background-color: #007AFF; */
	}

	/* 	.btn-img {
		width: 100rpx;
		height: 100rpx;
	} */
</style>
